<template>
  <div class="carousel">
    <div class="carousel-container" :style="{ transform: `translateX(-${currentIndex.value * 100}%)` }">
      <div v-for="item in items" :key="item.id" class="carousel-item">
        <img v-if="!isVideo(item.url)" :src="item.url" :alt="`slide-${item.id}`">
        <video 
          v-else
          :src="item.url"
          controls
          @play="pauseAutoPlay"
          @pause="resumeAutoPlay"
        ></video>
      </div>
    </div>

    <button class="prev" @click="prev">←</button>
    <button class="next" @click="next">→</button>

    <div class="indicators">
      <span 
        v-for="(item, index) in items" 
        :key="item.id"
        :class="{ active: currentIndex.value === index }"
        @click="goToSlide(index)"
      ></span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const items = ref([
  { id: 1, url: 'https://example.com/slide1.jpg' },
  { id: 2, url: 'https://example.com/slide2.mp4' },
  { id: 3, url: 'https://example.com/slide3.png' },
])

const currentIndex = ref(0)
const autoPlayInterval = ref(null)
const isAutoPlaying = ref(true)
const videoExtensions = ['mp4', 'webm', 'ogg']

const isVideo = (url) => {
  const extension = url.split('.').pop().toLowerCase()
  return videoExtensions.includes(extension)
}

const next = () => {
  currentIndex.value = (currentIndex.value + 1) % items.value.length
}

const prev = () => {
  currentIndex.value = currentIndex.value === 0 
    ? items.value.length - 1 
    : currentIndex.value - 1
}

const goToSlide = (index) => {
  currentIndex.value = index
}

const startAutoPlay = () => {
  if (isAutoPlaying.value) {
    autoPlayInterval.value = setInterval(() => {
      next()
    }, 5000)
  }
}

const stopAutoPlay = () => {
  if (autoPlayInterval.value) {
    clearInterval(autoPlayInterval.value)
  }
}

const pauseAutoPlay = () => {
  stopAutoPlay()
  isAutoPlaying.value = false
}

const resumeAutoPlay = () => {
  isAutoPlaying.value = true
  startAutoPlay()
}

onMounted(() => {
  startAutoPlay()
})

onBeforeUnmount(() => {
  stopAutoPlay()
})
</script>

<style scoped>
.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
}

.carousel-item {
  flex: 0 0 100%;
  height: 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.indicators span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.indicators span.active {
  background: white;
}
</style>
